<template>
  <div ref="echarts" style="width: 100%;height: 100%;">
  </div>
</template>
<script>

  import * as echarts from "echarts";

  export default {
    data() {
      return {
        myEcharts:null
      }
    },
    created: function () {

    },
    mounted() {

      this.myEcharts = echarts.init(this.$refs.echarts);

    },

    methods: {
      updateEcharts(config) {
        const options = this.getOptions(config)
        this.myEcharts.setOption(options);
      },

      viewportToPixels(value) {
        var parts = value.match(/([0-9\\.]+)(vh|vw)/)
        var q = Number(parts[1])
        var side = window[['innerHeight', 'innerWidth'][['vh', 'vw'].indexOf(parts[2])]]
        return side * (q/100)
      },


      getOptions(config){

        const xAxisFontSize = this.viewportToPixels('1.2vh').toFixed(2)
        const labelFontSize = this.viewportToPixels('1.1vh').toFixed(2)

        return {
          color:config.color,
          width: '80%',
          height: '80%',
          xAxis: {
            type: 'category',
            data: config.xData,
            axisLabel:{
              fontSize:xAxisFontSize,
              fontFamily:'Noto Sans SC',
              color:'white'
            },
            axisLine: {
              lineStyle: {
                color: 'white'
              }
            }
          },
          yAxis: {
            type: 'value',
            // max: config.yMax,
            axisLabel:{
              fontSize:xAxisFontSize,
              fontFamily:'Noto Sans SC',
              color:'white',
            },

          },
          grid:{
            top: '8%',
            bottom: '8%',
          },
          series: [
            {
              data: config.yData,
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              },
              label: {
                show: true,
                position: 'top',
                fontSize:labelFontSize,
                fontFamily:'Noto Sans SC',
                color:'white',
                lineHeight:labelFontSize
              }
            }
          ]
        }
      }
    }
  }

</script>

<style>



</style>
